<!-- 访问统计 -->
<template>
  <div class="access">
    <div
      style="
        display: flex;
        margin: 30px 0px;
        justify-content: space-around;
        flex-wrap: wrap;
      "
    >
      <a-form-item label="IP">
        <a-input
          v-model:value="value"
          placeholder="请输入IP地址"
          style="width: 300px"
        />
      </a-form-item>
      <a-form-item label="UA">
        <a-input
          v-model:value="value"
          placeholder="请输入 User Agent"
          style="width: 300px"
        />
      </a-form-item>
      <a-form-item label="URL">
        <a-input
          v-model:value="value"
          placeholder="请输入URL"
          style="width: 300px"
        />
      </a-form-item>
      <a-form-item label="地址">
        <a-input
          v-model:value="value"
          placeholder="请输入地址"
          style="width: 300px"
        />
      </a-form-item>
      <a-form-item label="浏览器">
        <a-input
          v-model:value="value"
          placeholder="请输入浏览器"
          style="width: 300px"
        />
      </a-form-item>
      <a-form-item label="内核">
        <a-input
          v-model:value="value"
          placeholder="请输入内核"
          style="width: 300px"
        />
      </a-form-item>
      <a-form-item label="OS">
        <a-input
          v-model:value="value"
          placeholder="请输入操作系统"
          style="width: 300px"
        />
      </a-form-item>
      <a-form-item label="设备">
        <a-input
          v-model:value="value"
          placeholder="请输入设备"
          style="width: 300px"
        />
      </a-form-item>
    </div>
    <div style="margin: 10px 90%; display: flex">
      <a-button type="primary">搜索</a-button>
      <a-button style="margin: 0px 10px">重置</a-button>
    </div>
    <!-- <a-table :row-selection="rowSelection" :columns="columns" :data-source="state.list"></a-table> -->
    <a-table
      :columns="columns"
      :data-source="state.list"
      :row-selection="rowSelection"
    >
      <template #url="{ text }">
        <b style="color: #1890ff">{{ text }}</b>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <span>
            <a>Invite 一 {{ record.name }}</a>
            <a-divider type="vertical" />
            <a>Delete</a>
            <a-divider type="vertical" />
            <a class="ant-dropdown-link">
              More actions
              <down-outlined />
            </a>
          </span>
        </template>
      </template>
      <template #name="{ record }">
        <a-button type="primary" ghost @click="hide(record)">删除</a-button>
      </template>
    </a-table>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, computed, unref } from 'vue'
import type { TableProps, TableColumnType } from 'ant-design-vue'
import { getVisit } from '@/api/visit'
import { ColumnType } from 'ant-design-vue/es/table/interface'
type Key = ColumnType['key']
interface DataType {
  key: string
  name: string
  age: number
  address: string
}

const columns: TableColumnType<DataType>[] = [
  {
    title: 'URL',
    dataIndex: 'url',
    key: 'url',
    slots: { customRender: 'url' }
  },
  {
    title: 'IP',
    dataIndex: 'ip'
  },
  {
    title: '浏览器',
    dataIndex: 'userAgent'
  },
  {
    title: '内核',
    dataIndex: 'engine'
  },
  {
    title: '操作系统',
    dataIndex: 'os'
  },
  {
    title: '设备',
    dataIndex: ''
  },
  {
    title: '地址',
    dataIndex: 'address'
  },
  {
    title: '访问量',
    dataIndex: 'count'
  },
  {
    title: '访问时间',
    dataIndex: 'createAt'
  },
  {
    title: '操作',
    dataIndex: '',
    fixed: 'right',
    width: 100,
    slots: { customRender: 'name' }
  }
]
export default defineComponent({
  setup() {
    const state = reactive({
      list: [],
      vivsList: {
        page: 1,
        pagesize: 12
      }
    })
    const selectedRowKeys = ref<Key[]>([]) // Check here to configure the default column
    const getList = async () => {
      const result = await getVisit()
       result.data.data?.[0].forEach((value, index) => {
        return { ...value, key: index }
      })
      state.list = result.data.data?.[0]
    }
    getList()
    //删除事件
    const hide = (e) => {
      console.log(e)
    }

    //全选事件
    const rowSelection = {
      onChange: (selectedRowKeys: Key[], selectedRows: DataType[]) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          'selectedRows: ',
          selectedRows
        )
      },
      getCheckboxProps: (record: DataType) => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name
      })
    }

    return {
      state,
      columns,
      hide,
      rowSelection
      // onSelectChange
    }
  }
})
</script>

<style>
.access {
  width: 100%;
  height: 100%;
}
.ant-row {
  margin-left: 30px;
}
</style>
